<template>
  <div>
    <nav-box></nav-box>
    <div class="yj">
      <img src="../../assets/images/aboutus/landscape-sea-horizon_2560x1600_sc.jpg" alt="">
      <div>
        <span class="bigtitle">公司愿景</span>
        <span class="title">科技让生活更美好 </span>
      </div>
    </div>
    <div class="banner">
      <div class="ban-t">
        <span class="tit">产品购买</span>
        <div class="list">
          <div>
            <div class="box1"><img src="../../assets/images/aboutus/Orion2.a721f92.png" alt=""></div>
            <div class="box2">
              <span class="lit-t">L1探索无人机</span>
              <span class="lit-b">改变探索世界的方式</span>
            </div>
          </div>
          <div>
            <div class="box1"><img src="../../assets/images/aboutus/Orion2.a721f92.png" alt=""></div>
            <div class="box2">
              <span class="lit-t">Z1科研无人机</span>
              <span class="lit-b">大数据采集与分析</span>
            </div>
          </div>
          <div>
            <div class="box1"><img src="../../assets/images/aboutus/Orion2.a721f92.png" alt=""></div>
            <div class="box2">
              <span class="lit-t">Z5Pro采样无人机</span>
              <span class="lit-b">改变探索世界的方式</span>
            </div>
          </div>
          <div>
            <div class="box1"><img src="../../assets/images/aboutus/Orion2.a721f92.png" alt=""></div>
            <div class="box2">
              <span class="lit-t">Z10农业无人机</span>
              <span class="lit-b">让农业喷洒更高效</span>
            </div>
          </div>

        </div>
      </div>
      <div class="ban-c">
        <span class="tit">产品定制</span>
        <div class="dzlist">
          <div>
            <img src="../../assets/images/aboutus/dz1.jpg" alt="">
            <span>深度行业定制</span>
          </div>
          <div>
            <img src="../../assets/images/aboutus/dz2.jpg" alt="">
            <span>专业数据分析</span>
          </div>
          <div>
            <img src="../../assets/images/aboutus/dz3.jpg" alt="">
            <span>行业知识免费培训</span>
          </div>
          <div style="border-right: 0">
            <img src="../../assets/images/aboutus/dz4.jpg" alt="">
            <span>售后快速应援</span>
          </div>
        </div>
      </div>
      <span class="hz">商务合作</span>
      <div class="ban-b">
        <p>请通过以下方式联系我们。工作时间：周一至周五9：00-18：00</p>
        <div class="ban-b-list">
          <div @mouseenter="msg1" @mouseleave="msg11">
            <span class="tu"></span>
            <span class="tu1">邮箱</span>
          </div>
          <div @mouseenter="msg2" @mouseleave="msg22">
            <span class="tu2"></span>
            <span class="tu3">电话</span>
          </div>
          <div @mouseenter="msg3" @mouseleave="msg33">
            <span class="tu4"></span>
            <span class="tu5">地址</span>
          </div>
        </div>
        <div style="width: 1200px;height: 2px;background: #e1e1e1;margin: 15px 0 0;"></div>
        <div class="showmsg">
          <div><span id="p1">info@bibangtech.com</span></div>
          <div><span id="p2">176932993232</span></div>
          <div><span id="p3">陕西西安</span></div>
        </div>
      </div>
      <span class="shfw">售后服务</span>
      <div class="rx">
        <img src="../../assets/images/aboutus/xsrx.jpg" alt="">
        <span>销售热线：029-89196083</span>
      </div>
      <div class="qus">
        <span>常见问题</span>
      </div>
      <div class="parmeter-box">
        <div class="parmeter-center-1" style="width: 100%;margin: 0 40px;">
          <ul class="ques" v-for="(item, ind) in qaq">
            <li @click="liShow(ind, item)">{{item.question}}
              <transition enter-active-class="animated slideInLeft">
                <i v-if="item.right" class="iconfont icon-arrow-right-copy-copy-copy"
                   style="float: right;color: black"></i>
              </transition>
              <transition enter-active-class="animated slideInDown">
                <i v-if="!item.right" class="iconfont icon-jiantou" style="float: right;color: black"></i>
              </transition>
            </li>
            <li :class="{show:item.isShow,hide:!item.isShow}">{{item.answer}}</li>
          </ul>
        </div>
      </div>
    </div>
    <footer-box></footer-box>
    <back-to-top></back-to-top>
  </div>
</template>

<script>
  import navBox from '../common/nav'
  import footerBox from '../common/footer'
  import BackToTop from "../common/backToTop";

  export default {
    name: "support",
    data() {
      return {
        msg: 'info@bibangtech.com',
        qaq: [
          {
            question: '1.彼帮智能的产品服务售后流程？',
            answer: 'xxxxx',
            isShow: false,
            right: true
          },
          {
            question: '2.一般进行无人机维修所需的时间？',
            answer: 'xxxxx',
            isShow: false,
            right: true
          },
          {
            question: '3.售后维修费用？',
            answer: 'xxxxxx',
            isShow: false,
            right: true
          },
          {
            question: '4.产品使用培训如何进行？',
            answer: 'xxxxxx',
            isShow: false,
            right: true
          },
          {
            question: '5.产品使用培训如何进行？',
            answer: 'xxxxxx',
            isShow: false,
            right: true
          }
        ]
      }
    },
    components: {
      BackToTop,
      navBox,
      footerBox
    },
    methods: {
      msg1() {
        let p1 = document.getElementById("p1")
        p1.style.display = "block"
      },
      msg11() {
        let p1 = document.getElementById("p1")
        p1.style.display = "none"
      },
      msg2() {
        let p1 = document.getElementById("p2")
        p1.style.display = "block"
      },
      msg22() {
        let p1 = document.getElementById("p2")
        p1.style.display = "none"
      },
      msg3() {
        let p1 = document.getElementById("p3")
        p1.style.display = "block"
      },
      msg33() {
        let p1 = document.getElementById("p3")
        p1.style.display = "none"
      },
      liShow(index, item) {
        this.qaq.forEach(i => {
          if (i.isShow !== this.qaq[index].isShow) {
            i.isShow = false;
            i.right = true;
          }
        })
        item.isShow = !item.isShow;
        item.right = !item.right;
      }
    },
    mounted() {
      document.documentElement.scrollTop = 0;
    }
  }
</script>

<style lang="scss">
  .show {
    height: 50px !important;
  }

  .hide {
    height: 0px !important;
  }

  .yj {
    width: 100%;
    height: 720px;
    position: relative;
    margin-top: 60px;
    > img {
      width: 100%;
      height: 100%;
    }
    > div {
      width: 100%;
      position: absolute;
      top: 33%;
      .bigtitle {
        font-size: 60px;
        color: #ffffff;
        font-weight: 500;
        display: block;
        text-align: center;
      }
      .title {
        font-size: 36px;
        color: #ffffff;
        display: block;
        text-align: center;
      }
    }
  }

  .banner {
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    .ban-t {
      width: 1200px;
      margin: 0 auto;
      .tit {
        font-size: 28px;
        color: #333333;
        font-weight: 600;
        display: block;
        text-align: center;
        padding: 80px 60px;
      }
      .list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding-bottom: 80px;
        > div {
          background: white;
          width: 285px;
          height: 294px;
          &:hover img {
            transform: scale(1.03);
          }
          .box1 {
            background: #e4e4e4;
            width: 285px;
            height: 215px;
            > img {
              width: 100%;
              height: 100%;
              transition: .5s;
            }
          }
          .box2 {
            width: 100%;
            .lit-t {
              display: block;
              text-align: center;
              font-size: 16px;
              color: #333333;
              font-weight: 600;
              margin: 20px 0 5px 0;
            }
            .lit-b {
              display: block;
              text-align: center;
              font-size: 14px;
              color: #999999;
            }
          }
        }
      }
    }
    .ban-c {
      width: 100%;
      background: white;
      .tit {
        font-size: 28px;
        color: #333333;
        font-weight: 600;
        display: block;
        text-align: center;
        padding: 80px 60px;
      }
      .dzlist {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        padding-bottom: 110px;
        > div {
          width: 300px;
          border-right: 1px solid #dddddd;
          > span {
            display: block;
            text-align: center;
            font-size: 16px;
            color: #333333;
          }
          img {
            display: block;
            margin: 0 auto;
          }
        }
      }
    }
    .hz {
      font-size: 28px;
      color: #333333;
      font-weight: 600;
      display: block;
      text-align: center;
      padding: 80px 60px;
    }
    .ban-b {
      width: 1200px;
      margin: 0 auto;
      background: white;
      p {
        font-size: 16px;
        color: #999999;
        text-align: center;
        padding: 40px 0;
      }
      .ban-b-list {
        display: flex;
        > div {
          width: 400px;
          > i {
            display: block;
            text-align: center;
            font-size: 50px;
            transition: .5s;
            &:hover {
              color: #00aeef;
            }
            &:hover + span {
              color: #00aeef;
            }
          }
          .tu {
            display: block;
            width: 52px;
            height: 42px;
            margin: 0 auto;
            background-image: url(../../assets/images/yj.png);
            background-repeat: no-repeat;
            background-size: 52px 42px;
            &:hover {
              background-image: url(../../assets/images/yj_b.png);
            }
            &:hover + span {
              color: #00aeef;
            }
          }
          .tu1 {
            display: block;
            text-align: center;
            padding-top: 5px;
            transition: .5s;
          }

          .tu2 {
            display: block;
            width: 38px;
            height: 52px;
            margin: 0 auto;
            background-image: url(../../assets/images/sj.png);
            background-repeat: no-repeat;
            background-size: 38px 52px;
            &:hover {
              background-image: url(../../assets/images/sj_b.png);
            }
            &:hover + span {
              color: #00aeef;
            }
          }
          .tu3 {
            display: block;
            text-align: center;
            padding-top: 5px;
            transition: .5s;
          }

          .tu4 {
            display: block;
            width: 48px;
            height: 51px;
            margin: 0 auto;
            background-image: url(../../assets/images/dz.png);
            background-size: 48px 51px;
            background-repeat: no-repeat;
            &:hover {
              background-image: url(../../assets/images/dz_b.png);
            }
            &:hover + span {
              color: #00aeef;
            }
          }
          .tu5 {
            display: block;
            text-align: center;
            padding-top: 5px;
            transition: .5s;
          }
        }
      }
      .showmsg {
        width: 1200px;
        height: 60px;

        display: flex;
        div {
          width: 400px;
          span{
            width: 400px;
            color: #666666;
            line-height: 60px;
            font-size: 26px;
            text-align: center;
            display: none;
          }
        }
      }
    }
    .shfw {
      font-size: 28px;
      color: #333333;
      font-weight: 600;
      display: block;
      text-align: center;
      padding: 80px 60px;
    }
    .rx {
      width: 1200px;
      height: 100px;
      background: #00aeef;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 30px;
        color: #ffffff;
      }
    }
    .qus {
      width: 1200px;
      height: 95px;
      background: white;
      margin: 0 auto;
      > span {
        line-height: 95px;
        font-size: 28px;
        color: #333333;
        margin-left: 40px;
      }
    }
    .parmeter-box {
      width: 1200px;
      display: flex;
      margin: 0 auto 80px;
      background: white;
      padding-bottom: 60px;
      .parmeter-center-1 {
        p {
          font-size: 24px;
          color: #707473;
          padding: 22px 0;
        }
        .ques {
          color: #44a8f2;
          width: 100%;
          li:nth-child(1) {
            height: 27px;
            margin-bottom: 20px;
            border-bottom: 1px solid #e5e5e5;
            cursor: pointer;
            font-size: 16px;
            color: #333333;
            font-weight: 600;
          }
          li:nth-child(2) {
            width: 100%;
            height: 0px;
            overflow: hidden;
            transition: all .5s;
            font-size: 14px;
            color: #999999;
          }

        }
        .parmeter-center-2 {
          display: flex;
          .ul1 {
            width: 250px;
            color: #6ea8f2;
            li {
              padding-bottom: 20px;

              span {
                display: block;
                color: #707473;
                font-size: 12px;
                margin-top: 5px;
              }
            }
          }
          .ul2 {
            width: 400px;
            color: #707473;
            li {
              padding-bottom: 20px;
              a {
                display: block;
                padding: 2px 8px;
                border: 1px solid #707473;
                background: #f7f8f9;
                color: #a6acaa;
                text-transform: uppercase;
                width: 20px;
                height: 18px;
                text-align: center;
                line-height: 18px;
              }
            }
          }
        }
      }
    }
  }
</style>
